import React, { useState, useEffect } from 'react';
import './index.scss';
import { PaginationType } from './type';

// 弹出框
function Popup(props: PaginationType) {
  const {
    pages = [],
    page = 1,
    pageSize = 10,
    total = 0,
    pagesLength = 5
  } = props;
  const [selfPages, setSelfPages] = useState<number[]>(pages); // 页码数组
  const [selfPage, setSelfPage] = useState<number>(page); // 当前页码
  const [selfCountPage, setSelfCountPage] = useState<number>(0); // 总页数
  const [selfPrevDisabled, setSelfPrevDisabled] = useState<boolean>(false); // 是否显示上一页按钮
  const [selfNextDisabled, setSelfNextDisabled] = useState<boolean>(false); // 是否显示下一页按钮

  useEffect(() => {
    // 初始化
    function init() {
      let tempMimPage = 1,
        tempMaxPage = pagesLength,
        maxPage = Math.ceil(total / pageSize),
        tempPageArr = [];
      if (pagesLength > maxPage) {
        tempMaxPage = maxPage;
      }
      for (let i = tempMimPage; i <= tempMaxPage; i++) {
        tempPageArr.push(i);
      }
      setSelfPages(tempPageArr);
      setSelfPage(1);
      setSelfCountPage(maxPage)
      setSelfPrevDisabled(false)
      setSelfNextDisabled(false)
    };
    init();
  }, [pagesLength, pageSize, total])

  // 上一页
  function prevPage() {
    let tempPrevNumber: number = selfPage - 1;
    if (selfPages.includes(tempPrevNumber)) {
      setSelfPage(tempPrevNumber);
      props.changePageFunction(tempPrevNumber);
    } else {
      prevPageFive()
    }
  };
  // 下一页
  function nextPage() {
    let tempNextNumber: number = selfPage + 1;
    if (selfPages.includes(tempNextNumber)) {
      setSelfPage(tempNextNumber);
      props.changePageFunction(tempNextNumber);
    } else {
      nextPageFive()
    }
  };
  // 上n页
  function prevPageFive() {
    let tempMin = selfPages[0] - pagesLength,
      tempMax = selfPages[0] - 1,
      tempPageArr = [];
    if (tempMin < 1) {
      return;
    }
    if (tempMax < pagesLength) {
      tempMax = pagesLength;
    }
    for (let i = tempMin; i <= tempMax; i++) {
      tempPageArr.push(i);
    }
    setSelfPages(tempPageArr);
    setSelfPage(tempMax);
    props.changePageFunction(tempMax);
  };
  // 下n页
  function nextPageFive() {
    let tempMin = selfPages[pagesLength - 1] + 1,
      tempMax = selfPages[pagesLength - 1] + pagesLength,
      tempPageArr = [];
    if (tempMax > selfCountPage) {
      tempMax = selfCountPage
    }
    if (tempMin > selfCountPage || isNaN(tempMin) || isNaN(tempMax)) {
      return;
    }
    for (let i = tempMin; i <= tempMax; i++) {
      tempPageArr.push(i);
    }
    setSelfPages(tempPageArr);
    setSelfPage(tempMin);
    props.changePageFunction(tempMin);
  };

  return (
    <div className="pagination">
      <div
        className={`prev ${selfPrevDisabled ? 'pointer-events-none' : 'pointer-events-ok'}`}
        onClick={prevPage}
      />
      {selfPages[0] > 1 ? (
        <div className="ellipsis" onClick={prevPageFive}>
          ...
        </div>
      ) : <></>}
      {selfPages && selfPages?.length ? (
        selfPages.map((item: number, index: number) => (
          <div
            className={`list ${item === selfPage ? 'active' : ''}`}
            key={`pages-list-${index}`}
            onClick={() => {
              if (props.changePageFunction) {
                setSelfPage(item);
                props.changePageFunction(item);
              }
            }}
          >
            {item}
          </div >
        ))
      ) : <></>}
      {(selfPages[pagesLength - 1] < selfCountPage) ? (
        <div className="ellipsis" onClick={nextPageFive}>
          ...
        </div >
      ) : <></>}
      <div
        className={`next ${selfNextDisabled ? 'pointer-events-none' : 'pointer-events-ok'}`}
        onClick={nextPage}
      />
    </div >
  );
}

export default Popup;